import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
  Steps,
  Spin,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import baseStyles from '../../components/SyOrderTableComponent/index.less';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@connect(({ refundOrderDetail, loading }) => ({
  refundOrderDetail,
  loading: loading.models.refundOrderDetail,
}))
@Form.create()
export default class RefundOrderDetail extends PureComponent {
  state = {};

  componentDidMount() {
    this.getRefundDetailData();
  }

  getRefundDetailData = () => {
    const { dispatch } = this.props;
    const postParam = {
        backProductId: ''
      };
    // if (this.props.refundOrderDetail.routePararm) {
    if (sessionStorage.getItem('backProductId')) {
      postParam.backProductId = sessionStorage.getItem('backProductId');
    }
    dispatch({
      type: 'refundOrderDetail/fetchGetBackProductDetail',
      payload:{
        ...postParam
      }
    });
  };

  jumpBack = (row) => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/orderManagement/refundOrder'}));
  }

  returnStatus = (val, type) => {
    switch(parseInt(val)) {
      case 10:
      case 20:
        return type == 'label' ? '买家申请维权' : 0
        break;
      case 21:
      case 22:
      case 31:
      case 32:
      case 33:
      case 34:
        return type == 'label' ? '京东审核' : 1
        break;
      case 40:
        return type == 'label' ? '退款至平台' : 2
        break;
      case 50:
        return type == 'label' ? '退款至用户' : 3
        break;
      default:
        return val
        break;
    }
  }

  render() {
    const { refundOrderDetail: { refundOrderDetailData }, loading } = this.props;
    
    const __tableData = refundOrderDetailData ? refundOrderDetailData.orderItemList : [];

    const tableCellStyle = {
      style: { 
        display: 'inline-block', 
        width: '100px',
        textAlign: 'right',
      },
    }

    //过滤空数据
    for (let [key, val] of Object.entries(__tableData)) {
      if (typeof(val) === 'object') {
        for (let [_key, _val] of Object.entries(val)) {
          if (!_val && _val != 0) {
            val[_key] = '/';
          }
        }
      }
    }
    if (refundOrderDetailData) {
      for (let [_key, _val] of Object.entries(refundOrderDetailData)) {
        if (!_val && _val != 0) {
          refundOrderDetailData[_key] = '/';
        }
      }
    }

      

    const tableColumns = [{
        title: '商品',
        dataIndex: 'productImg',
        className: baseStyles.nopadding,
        render: (text, record) =>
          (text) ? <div>
            <div style={{display: 'inline-block'}}>
              <img style={{ width: 60, height: 60, cursor: 'pointer', margin: 6, }} src={record.productImg} />
            </div>
            <div style={{display: 'inline-block'}}>
              <span>{record.productName}</span>
            </div>
          </div>
           : <span style={{ color: '#e8e8e8' }}> / </span>
      }, {
        title: '价格(元)',
        dataIndex: 'price',
        key: 'price',
        render: val => `${val}`
      }, {
        title: '数量',
        dataIndex: 'number',
        key: 'number',
        render: val => `${val}`
      }, {
        title: '优惠(元)',
        dataIndex: 'demo3',
        key: 'demo3',
        render: val => typeof(val) !== 'undefined' ? `${val}` : '/'
      }, {
        title: '小计(元)',
        dataIndex: '',
        key: '',
        render: (text, record, index) => {
          return <span>{ record.price * record.number }</span>
        }
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record, index) => {
          return <span style={record.status ? {} : {color: '#f81d22'}}>{ record.status ? '已签收' : '退货' }</span>
        }
      }]

    const colMessageProps = {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      style: { marginTop: 20 },
    };

    const colLabelStyle = {
      style: { 
        display: 'inline-block', 
        width: '80px',
        textAlign: 'right',
        marginRight: 20,
        verticalAlign: 'top',
      },
    }

    return (
      <PageHeaderLayout title="退货详情">
      {
        refundOrderDetailData ?
        <div>
          <Card style={{marginBottom: 10}}>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={24} sm={24}>
                <Steps current={this.returnStatus(refundOrderDetailData.status, 'value')}>
                  <Step title="买家申请维权" description={refundOrderDetailData.createtime} />
                  <Step title="京东审核" description={refundOrderDetailData.auditTime} />
                  <Step title="退款至平台" description="" />
                  <Step title="退款至用户" description={refundOrderDetailData.confirmTime} />
                </Steps>
              </Col>
            </Row>
          </Card>
          <Card style={{marginBottom: 10}}>
            <span style={{ fontWeight: 999, fontSize: 16 }}>订单状态: {this.returnStatus(refundOrderDetailData.status, 'label')}</span>
          </Card>
          <Card style={{marginBottom: 10}}>
            <span style={{ fontWeight: 999, fontSize: 16 }}>订单信息:</span>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>订单编号:</div>
                <span>{refundOrderDetailData.orderId}</span>
              </Col>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>支付流水号:</div>
                <span>{refundOrderDetailData.orderPayId}</span>
              </Col>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>订单类型:</div>
                <span>{refundOrderDetailData.orderType == '0' ? '普通订单' : '分期订单' + '(' + refundOrderDetailData.orderType + '期' + ( refundOrderDetailData.installmentAmount ? ' ¥' + refundOrderDetailData.installmentAmount + '/期' : '' ) + ')' }</span>
              </Col>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>退款流水号:</div>
                <span>{refundOrderDetailData.backProductPayId}</span>
              </Col>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>买家信息:</div>
                <div style={{display: 'inline-block'}}>
                  <div>
                    <div {...colLabelStyle}>姓名:</div>
                    <span>{refundOrderDetailData.username}</span>
                  </div>
                  <div>
                    <div {...colLabelStyle}>电话:</div>
                    <span>{refundOrderDetailData.mobile}</span>
                  </div>
                  <div>
                    <div {...colLabelStyle}>地址:</div>
                    <span>{refundOrderDetailData.addressDetail}</span>
                  </div>
                </div>
              </Col>
              <Col {...colMessageProps}>
                <div {...colLabelStyle}>用户ID:</div>
                <span>{refundOrderDetailData.userId}</span>
              </Col>
            </Row>
          </Card>
          <Card style={{marginBottom: 20}}>
            <Table columns={tableColumns} dataSource={__tableData} pagination={false} />
            <div style={{float:'right', marginTop: 10}}>订单共 {__tableData.length} 件商品, 共计: ¥{refundOrderDetailData.totalAmount} ( 含运费: ¥0.00 )</div>
          </Card>
        </div>
        : <Spin />
      }
      <div style={{paddingRight: 20, float: 'right'}}>
        <Button onClick={() => this.jumpBack()} size="large">关闭</Button>
      </div>
      </PageHeaderLayout>
    );
  }
}
